<template>
  <div class="sales-board">
      <div class="sales-board-intro">
        <h2>车票购买</h2>
        <p></p>
      </div>
      <div class="sales-board-form">
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  购买数量：
              </div>
              <div class="sales-board-line-right">
                  <v-counter :max="100" :min="20"></v-counter>
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  出行工具：
              </div>
              <div class="sales-board-line-right">
                  <v-mul-chooser :selections="versionList"></v-mul-chooser>
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  有效时间：
              </div>
              <div class="sales-board-line-right">
                  一年
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  总价：
              </div>
              <div class="sales-board-line-right">
                  500 元
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">&nbsp;</div>
              <div class="sales-board-line-right">
                  <div class="button">
                    立即购买
                  </div>
              </div>
          </div>
      </div>
      <div class="sales-board-des">
        <h2>产品说明</h2>
        <p>顾客更安全更便捷的出行。</p>
      </div>
  </div>
</template>

<script>
import VCounter from '../base/counter'
import VMulChooser from '../base/multiplyChooser'

export default {
  components: {
    VCounter,
    VMulChooser
  },
  data () {
    return {
      versionList: [
        {
          label: '公交车',
          value: 0
        },
        {
          label: '地跌',
          value: 1
        },
        {
          label: '高铁',
          value: 2
        },
        {
          label: '飞机',
          value: 3
        }
      ]
    }
  }
}
</script>


<style scoped>

</style>
